<template>
    <div class="prdp-outer">
      <div class="prdp-main">
        <!-- 头部标题栏 -->
        <div class="prdp-title-bar">
          <h2>张力自学习</h2>
        </div>
        <!-- 搜索栏 -->
        <div class="prdp-search-container">
          <el-row type="flex" align="middle" justify="space-between">
            <el-col :span="12">
              <el-form :inline="true" :model="searchForm" class="aprd-search-form">
                <el-form-item label="退火曲线号">
                  <el-input v-model="searchForm.annealCurve" placeholder="输入" style="width:160px" />
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="12" style="text-align:right;">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button type="primary" @click="handleReset">重置</el-button>
              <el-button type="primary">自学习导出</el-button>
              <el-button type="primary">对比分析</el-button>
              <el-button type="primary">添加新规则</el-button>
            </el-col>
          </el-row>
          <el-tabs v-model="activeTab" class="rule-tabs" style="margin-top:10px">
            <el-tab-pane label="现场规则" name="现场规则" />
            <el-tab-pane label="自学习规则" name="自学习规则" />
            <el-tab-pane label="化学元素规则库" name="化学元素规则库" />
          </el-tabs>
        </div>
        <!-- 表格 -->
        <div class="prdp-table-container">
          <el-table :data="tableData" border style="width: 100%" :header-cell-style="{ background: '#f5f7fa', color: '#333', fontWeight: 'bold', textAlign: 'center' }" :cell-style="{ textAlign: 'center', color: '#333' }" :scrollbar-always-on="true">
            <el-table-column prop="curve" label="退火曲线号" min-width="120" fixed />
            <el-table-column prop="steelGrade" label="钢种" min-width="180" />
            <el-table-column prop="upBias" label="预测张力上偏差" min-width="120" />
            <el-table-column prop="downBias" label="预测张力下偏差" min-width="120" />
            <el-table-column prop="target1" label="加热1张力目标值" min-width="120" />
            <el-table-column prop="upBias1" label="加热1张力上偏差" min-width="120" />
            <el-table-column prop="downBias1" label="加热1张力下偏差" min-width="120" />
            <el-table-column prop="target2" label="加热2张力目标值" min-width="120" />
            <el-table-column prop="upBias2" label="加热2张力上偏差" min-width="120" />
            <el-table-column prop="downBias2" label="加热2张力下偏差" min-width="120" />
            <el-table-column prop="target3" label="加热3张力目标值" min-width="120" />
            <el-table-column prop="upBias3" label="加热3张力上偏差" min-width="120" />
            <el-table-column prop="downBias3" label="加热3张力下偏差" min-width="120" />
            <el-table-column prop="avgTarget" label="均热张力目标值" min-width="120" />
          </el-table>
        </div>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive } from 'vue';
  
  const searchForm = reactive({
    annealCurve: '',
  });
  const activeTab = ref('自学习规则');
  
  const tableData = ref([
    { curve: 'D7808N00', steelGrade: 'SPFC440,440W,CR280/450', upBias: 0.5, downBias: 0.5, target1: 11.1, upBias1: 0.5, downBias1: 0.5, target2: 10, upBias2: 0.5, downBias2: 0.5, target3: 9.2, upBias3: 0.5, downBias3: 0.5, avgTarget: 9.2 },
    { curve: 'E8208B06', steelGrade: 'St16,DC06,DC07', upBias: 0.5, downBias: 0.5, target1: 8, upBias1: 0.5, downBias1: 0.5, target2: 6.4, upBias2: 0.5, downBias2: 0.5, target3: 5.2, upBias3: 0.5, downBias3: 0.5, avgTarget: 5.2 },
    { curve: 'E8308A21', steelGrade: 'St18,DC06,DC07', upBias: 0.5, downBias: 0.5, target1: 12.2, upBias1: 0.5, downBias1: 0.5, target2: 10.9, upBias2: 0.5, downBias2: 0.5, target3: 9.5, upBias3: 0.5, downBias3: 0.5, avgTarget: 9.5 },
    { curve: 'E8405A01', steelGrade: 'CR340/590DP,CR340/590J,590J', upBias: 0.5, downBias: 0.5, target1: 7.6, upBias1: 0.5, downBias1: 0.5, target2: 6.5, upBias2: 0.5, downBias2: 0.5, target3: 4.9, upBias3: 0.5, downBias3: 0.5, avgTarget: 4.9 },
    { curve: 'E8208B15', steelGrade: 'St16,DC08,DC07', upBias: 0.5, downBias: 0.5, target1: 10.8, upBias1: 0.5, downBias1: 0.5, target2: 9.1, upBias2: 0.5, downBias2: 0.5, target3: 7.5, upBias3: 0.5, downBias3: 0.5, avgTarget: 7.4 },
    { curve: 'E8208B07', steelGrade: 'St16,DC06,DC07', upBias: 0.5, downBias: 0.5, target1: 8.1, upBias1: 0.5, downBias1: 0.5, target2: 6.5, upBias2: 0.5, downBias2: 0.5, target3: 5, upBias3: 0.5, downBias3: 0.5, avgTarget: 4.9 },
    { curve: 'E8008701', steelGrade: 'St14,DC04,SPCE,GC270E,JS', upBias: 0.5, downBias: 0.5, target1: 7, upBias1: 0.5, downBias1: 0.5, target2: 6.1, upBias2: 0.5, downBias2: 0.5, target3: 5, upBias3: 0.5, downBias3: 0.5, avgTarget: 5 },
    { curve: 'E8108B17', steelGrade: 'St15,DC05,SPCF,GC270F,JK', upBias: 0.5, downBias: 0.5, target1: 11.9, upBias1: 0.5, downBias1: 0.5, target2: 10.6, upBias2: 0.5, downBias2: 0.5, target3: 9, upBias3: 0.5, downBias3: 0.5, avgTarget: 9 },
    { curve: 'E8108B22', steelGrade: 'St15,DC05,SPCF,GC270F,JK', upBias: 0.5, downBias: 0.5, target1: 12.7, upBias1: 0.5, downBias1: 0.5, target2: 11.8, upBias2: 0.5, downBias2: 0.5, target3: 10.6, upBias3: 0.5, downBias3: 0.5, avgTarget: 10.6 },
    { curve: 'E8208B05', steelGrade: 'St16,DC08,DC07', upBias: 0.5, downBias: 0.5, target1: 8, upBias1: 0.5, downBias1: 0.5, target2: 6.9, upBias2: 0.5, downBias2: 0.5, target3: 6, upBias3: 0.5, downBias3: 0.5, avgTarget: 6 },
  ]);
  
  const handleSearch = () => {
    // 查询逻辑
  };
  const handleReset = () => {
    searchForm.annealCurve = '';
  };
  </script>
  
  <style scoped>
  .prdp-outer {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to top, #eaf1fb 0%, #2c69e8 100%);
    overflow: hidden;
  }
  .prdp-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20px;
  }
  .prdp-table-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .el-table {
    flex: 1;
    height: 100% !important;
    min-height: 0;
  }
  .prdp-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  .prdp-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
  }
  
  .prdp-title-bar h2 {
    margin: 0;
    color: #333;
  }
  
  .prdp-status-indicators {
    display: flex;
    gap: 20px;
  }
  
  .prdp-status-item {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .prdp-status-text {
    color: #333;
    font-size: 14px;
  }
  
  .prdp-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #67c23a;
    display: inline-block;
  }
  
  .prdp-search-container {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }
  
  .prdp-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
  
  /* 等级指示器样式 */
  .prdp-grade-indicator {
    display: flex;
    justify-content: center;
  }
  
  .prdp-grade-a {
    color: #67c23a;
    font-weight: bold;
  }
  
  .prdp-grade-b {
    color: #409eff;
    font-weight: bold;
  }
  
  .prdp-grade-c {
    color: #e6a23c;
    font-weight: bold;
  }
  
  .prdp-grade-d {
    color: #f56c6c;
    font-weight: bold;
  }
  
  .prdp-rate-indicator {
    text-align: center;
  }
  .rule-tabs {
    margin-bottom: 0;
  }
  </style>
  